<template>
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

<div>
    
    <van-nav-bar
    title="购物车"
    left-arrow
    @click-left="onClickLeft"
    />
     <van-cell >
                <span >{{m_title}}</span>
                    <van-icon name="arrow" />
                    <van-icon class="icon" name="delete" />
                    <div>
                        <table >
                            <tr style="text-align:center">
                                <th>项目</th>
                                <th>单价</th>
                                <th>数量</th>
                            </tr>
                            <tr style="text-align:center" v-for="(item,index) in cart" :key="index">
                                <td width="120px">{{item.f_title}}</td>
                                <td width="50px">{{item.price}}</td>
                                <td width="90px" @click="cartedit(item.f_nmb,item.f_title,item.price)">
                                    <el-input-number 
                                    size="mini" 
                                    v-model="item.f_nmb"
                                    >
                                    </el-input-number>
                                </td>
                            </tr>
                        </table>
                            <div class="pay">应付金额: <span class="money">￥{{total}}</span></div>
                    </div>
                </van-cell>
               
    </div>
    </van-pull-refresh>
</template>
<script>
import {Toast} from 'vant'
import 'element-ui/lib/theme-chalk/index.css';
export default {
    name:'',
    data(){
        return{
            cart:[],
            m_title:'',
      isLoading: false
            
        }
    },
    inject:["reload"],
     methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    cartedit(f_nmb,f_title,price){
        this.f_title=f_title;
            this.price=price;
            this.f_nmb=f_nmb;
            this.f_sum=this.price*this.f_nmb;
             let username= sessionStorage.getItem('username');
             this.axios.post(
            "http://www.shop.com:8080/api.php/common/getFoodcartsEdit?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name="+username+"&&f_title=" +this.f_title
            +"&&m_title=" +this.m_title+"&&f_nmb=" +this.f_nmb+"&&price=" +this.price+"&&f_sum=" +this.f_sum
            ).then(res=>{
                Toast({
                message:res.data.msg,
                duration:1000,
            });
             this.reload()
        })
    },
      onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    }
     },
     computed: {
         total(){
             let total=0;
                for(let i=0;i<this.cart.length;i++){
                    total+=this.cart[i].f_sum
                }
            return total;
        }
     },
     mounted() {
        this.m_title=this.$route.query.m_title;
          let username= sessionStorage.getItem('username');
         this.axios.get('http://www.shop.com:8080/api.php/common/getfoodcartslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='+username)
        .then(res=>{
            this.cart=res.data.data;
        });
     },
   
    
}
</script>
<style  scoped>
.van-cell span{
    font-size: 17px;
}
.van-cell .van-icon{
    font-size: 18px;
    margin-left:15px;

}
.icon{
    float: right;
}
.table {
    text-align: center;
}
.pay{
    margin-top: 15px;
    float: right;
}
.money{
    color: red;
}
</style>